vue2升vue3笔记

初始化

通过cli创建vue3标准项目，拷贝老项目src进来替换。

手动安装package.json中单独的依赖项。

Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.

vue3对404配置进行了修改,必须要使用正则匹配

{
    // 匹配所有路径  vue2使用*   vue3使用/:pathMatch(.*)*或/:pathMatch(.*)或/:catchAll(.*)
    path: "/:pathMatch(.*)*",
    name: "404",
    component: ()=> import("../components/NoFind.vue")
}

原因：Vue Router不再使用path-to-regexp，而是实现了自己的解析系统，该系统允许路由排名并启用动态路由。由于我们通常会在每个项目中添加一条单独的包罗万象的路线，因此支持的特殊语法没有太大的好处*。参数的编码是跨路线编码，无一例外使事情更容易预测。

vue-clipboard2

只支持vue2

换为

npm i vue-clipboard-plus

render函数

第一个参数不是h了，是props，需要props的直接用，不用去context中取

element

装element-plus

按需引入需在每个页面单独引入所需组件

transition搭配router-view

之前

<transition name="fade-transform" mode="out-in">
  <keep-alive>
    <router-view :key="key" />
  </keep-alive>
</transition>

需修改为

<router-view v-slot="{ Component }">
    <transition name="fade-transform" mode="out-in">
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </transition>
</router-view>

dev-tools

网上搜vue3的下载

提供个chrome插件网站

https://chrome.zzzmh.cn/

vuex修改

router修改

已知问题